<template>
    <div>
      <div class="departnames" @click="handleFocus">
          <div class="staff-info" v-if="selectData && selectData.length > 0">
              <a @click.stop="del" class="selected-people" 
                  v-for="(item,index) in selectData" :key="index">
                      {{item.F_RealName}}<i slot="suffix" class="el-icon-close fontsize16"></i></a>
          </div>
          <div class="staff-info plachcholder-text" v-else>
              请选择
          </div>
          <div class="icon-jiantou">
              <img src="../../assets/flowlist/down_jiantou.png">
          </div>
      </div>
  
      <el-dialog title="请选择人员"
        :close-on-click-modal="false"
        append-to-body :visible.sync="dialogVisible" width="1118px" :before-close="handleClose">
          <div class="select-personal">
              <!-- 部门树 -->
              <div class="left textaligncenter">
                  <!-- <el-input class="search-input" placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
                  <el-tree  class="filter-tree"
                      :data="data"
                      :props="defaultProps"
                      default-expand-all
                      :filter-node-method="filterNode"
                      @node-click="handleNodeClick"
                      ref="tree">
                  </el-tree>
              </div>
              <!-- 员工列表 -->
              <div class="middle textaligncenter" v-loading="loading">
                  <el-input class="search-input" v-model="staffName" placeholder="输入关键字进行过滤"></el-input>
                  <div class="textalignleft">
                      <!-- <div class="node-name" v-text="nodeName"></div> -->
                      <div class="staff-name" v-if="filterData.length > 0">
                          <el-radio-group 
                              v-for="item in filterData" 
                              :key="item.F_UserId"
                              v-model="userName"
                              @change="selectStaff(item)" >
                                  <el-radio class="staff-name-items staff-name1" 
                                      :label="item.F_RealName" :value="item.F_UserId">{{item.F_RealName}}
                                  </el-radio>
                          </el-radio-group>
                      </div>
                      <div class="nodata" v-else>
                          <img src="../../assets/flowlist/no-data.png">
                      </div>
                  </div>
              </div>
              <!-- 已选人员 -->
              <div class="right">
                  <div class="node-name">已选人员：</div>
                  <div class="selected-staff-box" v-if="selectData && selectData.length > 0">
                      <a @click="deleteStaff" class="selected-people" v-for="(item,index) in selectData" :key="index">
                      {{item.F_RealName}}<i slot="suffix" class="el-icon-close fontsize16"></i></a>
                  </div>
              </div>
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="determine">确 定</el-button>
              <el-button @click="determine">取 消</el-button>
          </span>
      </el-dialog>
      
    </div>
  </template>
  <script>
  
  import { getCompanyDepartments } from "@/api/organization/department";
  import { getCompaniesUserList} from "@/api/organization/user";
  import { event } from 'min-dom';
  export default {
      name: 'staffSelector',
      data(){
          return{
              dialogVisible:false,
              filterText: '',
              data: [],
              userId:'',
              defaultProps: {
                  children: 'children',
                  label: 'F_FullName'
              },
              nodeName:'',
              Department_Id:'',
              Company_Id:'',
              staffList:[],
              filterData:[],
              loading:false,
              selectData:[],
              staffName:'',
              userName:'',
              options: [],
          }
      },
      watch: {
          filterText(val) {
              this.$refs.tree.filter(val);
          },
          staffName(val){
              if(val){
                  this.filterData = this.staffList.filter(e=>e.F_RealName.includes(val))
              }else{
                  this.filterData = this.staffList
              }
          }
      },
      methods:{
          handleFocus(){
              this.dialogVisible = true
              this.getNodeData()
          },
          filterNode(value, data) {
              if (!value) return true;
              console.log('data',data);
              return data.F_FullName.indexOf(value) !== -1;
          },
          handleNodeClick(data){
              if(data.F_FullName)this.nodeName = data.F_FullName
              this.Department_Id = data.F_DepartmentId//部门id
              this.Company_Id = data.F_CompanyId//公司id
              this.getUserList()
          },
          async getNodeData(){
            let result =  await getCompanyDepartments()
            if(result.data.success){
              this.data = result.data.data
            }
          },
          getUserList(){
              let self = this
              let params = {
                  Company_Id: this.Company_Id,//公司id
                  limit: 1,//当前页
                  size: 200,//每页显示大小
                  Keyword: '',//关键字
                  Department_Id: this.Department_Id,//部门id
              }
              this.loading = true
              getCompaniesUserList(params).then(res =>{
                 if(res.data.success){
                      self.loading = false
                      self.staffList = res.data.data.Rows
                      self.filterData = self.staffList
                  }
              })
  
          },
          selectStaff(item){
              this.selectData = []
              this.selectData.push(item)
          },
          deleteStaff(){
              this.selectData = []
          },
          del(){
              this.selectData = []
              this.$emit('del','')
          },
          determine(){
              if(this.selectData && this.selectData.length == 1){
                  this.userId = this.selectData[0].F_UserId
                  this.$emit('transmissionData',this.userId)
              }
              this.dialogVisible = false
              
          }
      }
  }
  </script>
  <style scoped>
  .select-personal{
      width: 100%;
      height: 600px;
      display: flex;
      flex-direction: row;
  }
  .left,.middle,.right{
      width: 33.33333%;
      height: 100%;
      border-right: 1px solid #DEDEDE;
      border-bottom: 1px solid #DEDEDE;
      overflow: scroll;
  }
  .textaligncenter{
      text-align: center;
  }
  .textalignleft{
      text-align: left;
  }
  ::v-deep .el-dialog__body{
      padding:0 0 10px 0!important;
  }
  .search-input{
      width: 90%;
      height: 36px;
      margin-top: 10px;
  }
  .node-name{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #606266;
      line-height: 28px;
      margin-top: 10px;
      margin-left: 32px;
  }
  .selected-staff-box{
      margin-left: 32px;
      margin-right: 32px;
      margin-top: 10px;
  }
  .selected-staff-box:hover{
      cursor: pointer;
  }
  .selected-people{
      padding: 7px 18px;
      background: #EEEEEE;
      border-radius: 2px;
  
  }
  .staff-name{
      color: #606266;
      margin-top: 10px;
      border-radius:4px;
  }
  .staff-name1:hover{
      background: #e5f1ff;
  }
  .staff-name-items{
      margin-left: 32px;
      margin-top: 8px;
  }
  .selected-staff{
      width: 80px;
      height: 30px;
      background: #EEEEEE;
      border-radius: 2px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #444444;
      line-height: 30px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  .selected-staff:hover{
      cursor: pointer;
  }
  .fontsize16{
      margin-left: 8px;
  }
  ::v-deep .el-radio-group{
      display: block!important;
      margin-top: 15px;
  }
  .nodata{
      margin-left: 32px;
      text-align: center;
  }
  .nodata > img{
      margin-top: 150px;
  }
  .departnames{
      width: 100%;
      height: 36px;
      border:1px solid #DCDFE6;
      border-radius: 4px; 
      opacity: 0.8;
      display: flex;
      flex-direction: row;
  }
  .departnames:hover{
      cursor: pointer;
      opacity: 1;
  }
  .icon-jiantou{
      width: 5%;
      height: 36px;
      text-align: right;
  }
  .icon-jiantou::after{
      content: '';
      display: inline-block;
      height: 100%;
      width: 1px;
      vertical-align: middle;
  }
  .icon-jiantou>img{
      width: 16px;
      height: 16px;
      vertical-align: middle;
  }
  .staff-info{
      width: 95%;
      height: 36px;
  }
  .plachcholder-text{
      color: #606266;
      text-indent: 1em;
      opacity: 0.6;
  }
  </style>
  